<template>
  <div class="addWisdomBank">
    <c-title :hide="false" :text="'添加银行卡'"></c-title>
    <div class="listBox">
      <van-field v-model="from.name" label="姓名" placeholder="请输入持卡人姓名"></van-field>
      <van-field v-model="from.card" label="卡号" placeholder="请输入卡号"></van-field>
      <van-field v-model="radioCard" label="卡类型" :readonly="true" @click="childParams('card_type')" placeholder="请选择银行卡类型">
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-field>
      <template v-if="from.card_type && from.card_type == 2">
        <van-field v-model="from.cvv2" label="安全码" placeholder="请输入卡背面末三位"></van-field>
        <van-field v-model="from.valid_day" label="有效期" :readonly="true" @click="childParams('valid_day')" placeholder="请选择月份/年份">
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-field>
      </template>

      <van-field v-model="from.identity" label="身份证" placeholder="请输入身份证"></van-field>
      <van-field v-model="from.mobile" label="手机号" placeholder="请输入银行卡预留手机号"></van-field>
    </div>

    <div class="posbtn set-pc-style">
      <div class="btn" @click="confirmBtn">确认</div>
    </div>
    <!-- 银行卡类型 -->
    <van-popup v-model="cardShow" position="bottom" :style="{ height: '25%' }" round>
      <van-nav-bar title="银行卡类型" left-text="取消" right-text="确认" @click-left="cardShow = false" @click-right="onClickRight_cardShow">
        <template #left> 取消 </template>
        <template #right> 确认 </template>
      </van-nav-bar>
      <van-radio-group v-model="radioCard">
        <div class="banklis" v-for="(item, index) in bankCard" :key="index">
          <div class="name">{{ item.name }}</div>
          <van-radio :name="item.name"></van-radio>
        </div>
      </van-radio-group>
    </van-popup>
    <!-- 有效期至 -->
    <van-popup v-model="timeShow" position="bottom" round>
      <van-datetime-picker @confirm="onClickRight_timeShow" @cancel="timeShow = false" v-model="currentDate" type="year-month" title="选择年月" :max-date="maxDate" />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      from: {
        name: "",
        card: "",
        card_type: "",
        identity: "",
        mobile: "",
        cvv2: "",
        valid_day: ""
      },
      cardShow: false,
      radioCard: "",
      bankCard: [
        { name: "储蓄卡", id: 1 },
        { name: "信用卡", id: 2 }
      ],
      // 有效期选择
      timeShow: false,
      maxDate: new Date(),
      currentDate: new Date()
    };
  },
  activated() {},
  methods: {
    childParams(type) {
      if (type == "card_type") {
        this.cardShow = true;
      } else if (type == "valid_day") {
        // 有效期
        this.timeShow = true;
      }
    },
    onClickRight_cardShow() {
      //银行卡类型
      this.from.card_type = this.radioCard == "储蓄卡" ? 1 : 2;
      this.cardShow = false;
    },
    // 有效期方法
    onClickRight_timeShow(e) {
      console.log(e);
      this.from.valid_day = this.timestampToTime(e);
      this.timeShow = false;
    },
    // 时间戳转日期
    timestampToTime: function (timestamp) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear();
      let M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;

      return `${M}${Y}`;
    },
    checkJson() {
      if (!this.from.card_type) {
        this.$dialog.alert({
          message: "请选择银行卡类型"
        });
        return false;
      }
      if (!this.from.card) {
        this.$dialog.alert({
          message: "请输入卡号"
        });
        return false;
      }
      if (!this.from.mobile) {
        this.$dialog.alert({
          message: "请输入银行卡预留手机号"
        });
        return false;
      }
      if (!this.from.name) {
        this.$dialog.alert({
          message: "请输入持卡人姓名"
        });
        return false;
      }
      if (!this.from.identity) {
        this.$dialog.alert({
          message: "请输入身份证"
        });
        return false;
      }
      if (this.from.card_type == 2) {
        if (!this.from.valid_day) {
          this.$dialog.alert({
            message: "请选择月份/年份"
          });
          return false;
        }
        if (!this.from.cvv2) {
          this.$dialog.alert({
            message: "请输入卡背面末三位"
          });
          return false;
        }
      }
      return true;
    },
    // 确认
    confirmBtn() {
      if (!this.checkJson()) {
        return;
      }
      let urlStr = "plugin.eplus-pay.frontend.card.bindCardApply";
      let json = {
        card_type: this.from.card_type,
        card_no: this.from.card,
        phone: this.from.mobile,
        name: this.from.name,
        identity_no: this.from.identity
      };
      if (this.from.card_type == 2) {
        // 信用卡多 安全码和有效期
        json.validate = this.from.valid_day;
        json.cvv2 = this.from.cvv2;
      }
      $http
        .get(urlStr, json, "")
        .then(
          response => {
            if (response.result === 1) {
              console.log(response.data);
              this.$dialog
                .alert({
                  message: response.msg
                })
                .then(() => {
                  if (this.$route.params.to == "SilverBankListwisdom") {
                    this.$router.replace(this.fun.getUrl("SilverBankList", { option: "wisdom" }));
                  } else if (this.$route.params.to == "wisdomBindTask") {
                    this.$router.replace(this.fun.getUrl(`${this.$route.params.to}`));
                  } else {
                    this.$router.go(-1);
                  }
                });
            } else {
              this.$dialog.alert({
                message: response.msg
              });
            }
          },
          response => {
            this.$dialog.alert({
              message: response
            });
          }
        )
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.banklis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7813rem 0.9375rem;
}

.posbtn {
  position: fixed;
  width: 100%;
  height: 3.125rem;
  bottom: 0;
  left: 0;
  padding: 0.3125rem 1.7188rem;
  background: #fff;

  .btn {
    height: 2.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    background: #f51d1d;
    border-radius: 0.3125rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>